import React from 'react'
import { Routes, Route } from 'react-router-dom'
import { Layout } from 'antd'
import Header from './components/Header'
import Sidebar from './components/Sidebar'
import Dashboard from './pages/Dashboard'
import Downloads from './pages/Downloads'
import Files from './pages/Files'
import Profile from './pages/Profile'
import Settings from './pages/Settings'
import ThemeSettings from './pages/ThemeSettings'
import Login from './pages/Login'
import { useAuth } from './hooks/useAuth'
import { useTheme } from './contexts/ThemeContext'
import './App.css'

const { Content } = Layout

const App: React.FC = () => {
  const { isAuthenticated, loading } = useAuth()
  const { currentTheme, themeMode } = useTheme()

  if (loading) {
    return <div className="loading">加载中...</div>
  }

  if (!isAuthenticated) {
    return <Login />
  }

  return (
    <Layout style={{ minHeight: '100vh' }} data-theme={themeMode}>
      <Sidebar />
      <Layout style={{ marginLeft: 200 }}>
        <Header />
        <Content
          className="theme-content"
          style={{
            margin: 0,
            minHeight: 'calc(100vh - 64px)',
            background: currentTheme.backgroundColor,
            transition: 'all 0.3s ease',
          }}
        >
          <Routes>
            <Route path="/" element={<Dashboard />} />
            <Route path="/downloads" element={<Downloads />} />
            <Route path="/files" element={<Files />} />
            <Route path="/profile" element={<Profile />} />
            <Route path="/settings" element={<Settings />} />
            <Route path="/theme" element={<ThemeSettings />} />
          </Routes>
        </Content>
      </Layout>
    </Layout>
  )
}

export default App